<template>
  <!--厂区展示图-->
  <div class="factory-map clearfix">
    <!--车间-->
    <div v-for="p in groupList" :key="p.index" class="group">
      <div class="name">{{ p.name }}</div>
      <div class="item-wrap">

        <!--设备-->
        <div class="item-point" title="设备1">
          <el-popover
            placement="right"
            width="350"
            trigger="click"
          >
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span class="name">{{ dataInfo.details }}</span>
                <el-button style="float: right; padding: 3px 0" type="text">查看监控</el-button>
              </div>
              <div class="text item">
                设备编号：1234
              </div>
              <div class="text item">
                设备名称：1234
              </div>
              <div class="text item">
                设备状态：1234
              </div>
              <div class="text item">
                所属厂区：1234
              </div>
              <div class="text item">
                所属车间：1234
              </div>
              <div class="text item">
                采购时间：1234
              </div>
              <div class="text item">
                安装时间：1234
              </div>
              <div class="text item">
                设备温度：温度
              </div>
              <div class="text item">
                设备湿度：湿度
              </div>
              <div class="text item">
                设备高度：高度
              </div>
              <div class="text item">
                设备宽度：宽度
              </div>
              <div class="text item">
                负责人：负责人
              </div>
              <div class="text item">
                描述：1234
              </div>
              <slot />
            </el-card>
            <template slot="reference">
              <img class="img" src="../../../assets/image/avatar.jpg" alt="">
              <div class="icon-color" />
            </template>
          </el-popover>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FactoryMap',
  props: {
    // 基础信息
    dataInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    // 车间或者流水线数据
    groupList: {
      type: Array,
      default() {
        return []
      }
    }
  }
}
</script>

<style lang="scss">
  .factory-map {
    // 卡片
    .box-card {
      width: 320px;

      .name {
        font-size: 20px;
      }

      .text {
        font-size: 16px;
      }

      .item {
        margin-bottom: 18px;
      }
    }
  }

</style>
<style lang="scss" scoped>
  .factory-map {
    margin-top: 30px;
    width: 100%;
    min-height: 230px;
    border: 1px solid #ccc;
    padding: 10px 20px;

    .group {
      padding: 10px 10px;
      float: left;
      width: 23%;
      margin: 20px 1%;
      min-height: 200px;
      background: #fff;
      border-radius: 8px;

      .name {
        text-align: center;
        font-size: 20px;
        font-weight: bold;
      }

      .item-wrap {

        .item-point {
          cursor: pointer;
          float: left;
          width: 23%;
          margin: 8px 1%;
          text-align: center;
          min-width: 30px;

          .img {
            width: 30px;
            height: 30px;
          }

          .icon-color {
            margin: 0 auto;
            width: 10px;
            height: 10px;
            border-radius: 50%;
          }
        }
      }
    }

    @media screen and (max-width: 1200px) {
      .group {
        width: 48%;
      }
    }
  }

</style>
